使用github pages + hexo搭建博客

发表于 | 分类于


Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

目前比较热门的两种方式就是使用静态博客框架 jekyll 或者 hexo，相对于jekyll，hexo主题丰富，第三方插件优秀，配置简单，最主要的一点，hexo的开发文档阅读感受较jekyll来说更舒服。

一.环境搭建

官方文档非常详细 hexo documents

这里以MacOs为例

  • github账号
    注册地址

  • 安装Node.js

    cURL:
    $ curl https://raw.github.com/creationix/nvm/master/install.sh | sh

    Wget:
    $ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

    安装完成后重启终端：
    $ nvm install stable

    这里推荐下载安装程序来安装

  • 安装git
    $ brew install git
  • 安装 Hexo
    $ npm install -g hexo-cli

二.建站

1
2
3
$ hexo init <folderName>
$ cd <folderName>
$ npm install

安装完成后文件目录结构如下： 

1
2
3
4
5
6
7
8

├── \_config.yml
├── package.json
├── scaffolds
├── source
|   ├── \_drafts
|   └── \_posts
└── themes

你可以在_config.yml中配置大部分网站设置。

其他一些Hexo常用命令： 

1
2
3
4
5
6
7

hexo n          # 新建文章，在\source\_posts文件夹里
hexo new page   # 新建页面，比如想在导航栏新增一个“关于我”的页面
hexo clean      # 清除本地的数据库和生成的public文件夹
hexo g          # 生成博客文件
hexo s          # 运行在本地浏览器，可当预览使用
hexo d          # 部署博客到Github等

三.创建Repo

  • 新建一个repo，注意名称一定是your_username.github.io这样的格式。

  • 进入刚新建的仓库，点击Setting，一直拖到最下面，选择Automatic Page Generator，随便选个主题然后发布即可。

  • 在站点_config.yml文件中任意位置添加以下代码段：

1
2
3
4
5
deploy:
  type: git
  # 填上你自己的仓库名，注意后面有`.git`
  repository: git@github.com:your_username/your_username.github.io.git
  branch: master

注意每个：后面都要跟一个空格！

  • 安装部署所需：
    $ npm install hexo-deployer-git --save

四.主题

创建 Hexo 主题非常容易，您只要在 themes 文件夹内，新增一个任意名称的文件夹，并修改 _config.yml 内的 theme 设定，即可切换主题。一个主题可能会有以下的结构： 

1
2
3
4
5
6
.
├── \_config.yml(配置是无需重启服务器会自动更新)
├── languages
├── layout
├── scripts
└── source

这里推荐使用最多的nexT 主题

五.新建页面

新建分类页面：
hexo new page categories

打开../source/categories/index.md

编辑相对应的type

1
2
3
4
5
6
---
title: 分类
date: 2018-05-21 22:00:35
type: "categories"
comments: false
---

在站点_config.yml中更改menu下代码，如果没有添加

categories: /categories/

新建导航

默认导航栏只有首页、归档、标签、分类四项。如果想增加其他如C++、随笔等。需要打开\themes\next_config.yml找到如下 

1
2
3
4
5
6
7
8
9
10
11
12
#When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
  home: /
  categories: /categories
  tags: /tags
  archives: /archives
  #这里是新增的，Coding是一级目录，C是二级目录，同理随笔是一级目录
  c++: /categories/Coding/C/
  python: /categories/Coding/Python/
  essay: /categories/随笔/
  #注意这里没有/categories
  about: /about

that‘s all！

Thanks!